<template>
  <div class="domPrint-container">
    <avue-crud ref="crud" :data="data" :option="option">
      <template slot-scope="{ type, size }" slot="menu">
        <el-button
          icon="el-icon-view"
          :size="size"
          :type="type"
          @click="viewFn">
          查看
        </el-button>
      </template>
    </avue-crud>
    <viewDialog
      v-if="dialogVisible"
      :selectedList="selectedList"
      @close="dialogVisible = false"></viewDialog>
  </div>
</template>

<script>
export default {
  name: 'domPrint',
  components: {
    // viewDialog: () => import('./comp/viewDialog'),
    viewDialog: () => import('./comp/viewDialogCustom')
  },
  data() {
    return {
      data: [
        {
          name: '张三',
          sex: '1',
          datetime: '2025-02-21',
          address: '北京',
          address1: '朝阳区',
          address2: '八大胡同'
        },
        {
          name: '李四',
          sex: '2',
          datetime: '2025-02-22',
          address: '武汉市',
          address1: '江汉区',
          address2: '花楼街'
        },
        {
          name: '王五',
          sex: '1',
          datetime: '2025-02-23',
          address: '贵阳市',
          address1: '云岩区',
          address2: '市西路'
        }
      ],
      option: {
        dialogClickModal: true,
        align: 'left',
        headerAlign: 'left',
        height: 541,
        border: true,
        stripe: true,
        menuWidth: 80,
        // menuType: 'menu',
        // menuBtnTitle: '●●●',
        searchIndex: 3,
        refreshBtn: false,
        searchShowBtn: false,
        gridBtn: false,
        searchBtnIcon: ' ',
        searchBtnText: '查询',
        emptyBtnIcon: ' ',
        emptyBtnText: '重置',
        labelWidth: 120,
        searchLabelWidth: 120,
        searchIcon: true,
        addBtnText: '这是新增按钮哦',
        addTitle: '新增标题哦',
        showHeader: true, // 是否显示表格的表头
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        column: [
          {
            label: '姓名',
            prop: 'name',
            fixed: true,
            overHidden: true,
            minWidth: 300
          },
          {
            label: '性别',
            prop: 'sex',
            type: 'select',
            overHidden: true,
            minWidth: 300,
            dicData: [
              {
                label: '男',
                value: '1'
              },
              {
                label: '女',
                value: '2'
              }
            ]
          },
          {
            label: '日期',
            prop: 'datetime',
            type: 'date',
            overHidden: true,
            format: 'yyyy-MM-dd', // 搜索框的日期显示格式，若没有formatter，表格的内容也会是这个格式
            valueFormat: 'yyyy-MM-dd', // 搜索条件的入参值
            html: true,
            minWidth: 150
          },
          {
            label: '地址',
            prop: 'address',
            overHidden: true,
            minWidth: 200
          },
          {
            label: '住址1',
            prop: 'address1',
            overHidden: true,
            minWidth: 100
          },
          {
            label: '住址2',
            prop: 'address2',
            overHidden: true,
            minWidth: 100
          }
        ]
      },
      dialogVisible: false,
      allList: [
        {
          id: 1,
          accountNo: '1200 1012 2000 6797 2',
          accountName: '强盛集团',
          openBankName: '宇宙银行江北支行营业部',
          transAmt: '人民币贰万元整 RMB 20,000.00',
          receiptType: '转账支取回单',
          transChannel: '网银',
          businessType: '转账存入',
          transSerial: '15591455',
          payAccountNo: '2001 0122 0005 3411 4',
          payAccountName: '人民币活期结算账号',
          payOpenBankName: '海曙支行营业部'
        },
        {
          id: 2,
          accountNo: '1200 1012 2000 6797 2',
          accountName: '强盛集团',
          openBankName: '宇宙银行江北支行营业部',
          transAmt: '人民币贰万元整 RMB 20,000.00',
          receiptType: '转账支取回单',
          transChannel: '网银',
          businessType: '转账存入',
          transSerial: '15591455',
          payAccountNo: '2001 0122 0005 3411 4',
          payAccountName: '人民币活期结算账号',
          payOpenBankName: '海曙支行营业部'
        },
        {
          id: 3,
          accountNo: '1200 1012 2000 6797 2',
          accountName: '强盛集团',
          openBankName: '宇宙银行江北支行营业部',
          transAmt: '人民币贰万元整 RMB 20,000.00',
          receiptType: '转账支取回单',
          transChannel: '网银',
          businessType: '转账存入',
          transSerial: '15591455',
          payAccountNo: '2001 0122 0005 3411 4',
          payAccountName: '人民币活期结算账号',
          payOpenBankName: '海曙支行营业部'
        },
        {
          id: 4,
          accountNo: '1200 1012 2000 6797 2',
          accountName: '强盛集团',
          openBankName: '宇宙银行江北支行营业部',
          transAmt: '人民币贰万元整 RMB 20,000.00',
          receiptType: '转账支取回单',
          transChannel: '网银',
          businessType: '转账存入',
          transSerial: '15591455',
          payAccountNo: '2001 0122 0005 3411 4',
          payAccountName: '人民币活期结算账号',
          payOpenBankName: '海曙支行营业部'
        },
        {
          id: 5,
          accountNo: '1200 1012 2000 6797 2',
          accountName: '强盛集团',
          openBankName: '宇宙银行江北支行营业部',
          transAmt: '人民币贰万元整 RMB 20,000.00',
          receiptType: '转账支取回单',
          transChannel: '网银',
          businessType: '转账存入',
          transSerial: '15591455',
          payAccountNo: '2001 0122 0005 3411 4',
          payAccountName: '人民币活期结算账号',
          payOpenBankName: '海曙支行营业部'
        },
        {
          id: 6,
          accountNo: '1200 1012 2000 6797 2',
          accountName: '强盛集团',
          openBankName: '宇宙银行江北支行营业部',
          transAmt: '人民币贰万元整 RMB 20,000.00',
          receiptType: '转账支取回单',
          transChannel: '网银',
          businessType: '转账存入',
          transSerial: '15591455',
          payAccountNo: '2001 0122 0005 3411 4',
          payAccountName: '人民币活期结算账号',
          payOpenBankName: '海曙支行营业部'
        },
        {
          id: 7,
          accountNo: '1200 1012 2000 6797 2',
          accountName: '强盛集团',
          openBankName: '宇宙银行江北支行营业部',
          transAmt: '人民币贰万元整 RMB 20,000.00',
          receiptType: '转账支取回单',
          transChannel: '网银',
          businessType: '转账存入',
          transSerial: '15591455',
          payAccountNo: '2001 0122 0005 3411 4',
          payAccountName: '人民币活期结算账号',
          payOpenBankName: '海曙支行营业部'
        },
        {
          id: 8,
          accountNo: '1200 1012 2000 6797 2',
          accountName: '强盛集团',
          openBankName: '宇宙银行江北支行营业部',
          transAmt: '人民币贰万元整 RMB 20,000.00',
          receiptType: '转账支取回单',
          transChannel: '网银',
          businessType: '转账存入',
          transSerial: '15591455',
          payAccountNo: '2001 0122 0005 3411 4',
          payAccountName: '人民币活期结算账号',
          payOpenBankName: '海曙支行营业部'
        }
      ],
      selectedList: []
    };
  },
  methods: {
    viewFn() {
      let randomNum = ~~(Math.random() * 8) + 1; // [1, 8] 随机数
      this.selectedList = this.allList.slice(0, randomNum);
      this.$message.success(`已选${this.selectedList.length}条数据`);
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped></style>
